<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-05 11:22:56
-->
<template>
  <div id="left1Container" style="height: 95%"></div>
</template>
<script>
// 导入图表
import { Line } from '@antv/g2plot';
export default{
  data() {
    return{};
  },
  methods: {
    initChart(){
      const data = [
          { time: '22-1-1', 平均湿度: 57 },
          { time: '22-1-2', 平均湿度: 49 },
          { time: '22-1-3', 平均湿度: 36 },
          { time: '22-1-4', 平均湿度: 87 },
          { time: '22-1-5', 平均湿度: 46 },
          { time: '22-1-6', 平均湿度: 68 },
          { time: '22-1-7', 平均湿度: 77 },
        ]

        const line = new Line('left1Container', {
          data,
          xField: 'time',
          xAxis: {
                  range: [0, 1],
                  label: {
                    style: {
                      fill: "white",
                    },
                  },
                },
          yField: '平均湿度',
          yAxis: {
                    label: {
                      style: {
                        fill: "white",
                      },
                    },
                     grid: {
                      line: {
                        // 设置辅助线样式
                        style: {
                          // lineDash: [2, 3], // 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段
                          strokeOpacity: 0.2, // 辅助线透明度
                        },
                      },
                    },
                  },
          label: {},
          point: {
            size: 5,
            shape: 'circular',
            style: {
              fill: 'white',
              stroke: '#22488f',
              lineWidth: 3,
            },
          },
          tooltip: {
            domStyles: {
              "g2-tooltip": {
                // 背景框样式
                padding: "10px",
                background: "rgba(30, 55, 260, 0.8)",
                border: "1px solid #00FFFF",
                color: "#FFFFFF",
                fontFamily: "微软雅黑",
              },
            },
          },
          state: {
            active: {
              style: {
                shadowBlur: 8,
                // stroke: '#fff',
                fill: 'white',
              },
            },
          },
  interactions: [{ type: 'marker-active' }],
});

line.render();
    }
  },
  mounted() {
    this.initChart();
  },
}


</script>
<style scoped>
.sdfsdf {
  color: #386ac5;
}
</style>
